<style lang="less" scoped>
  @import './my.less';
</style>

<template>
  <div class="page container my-profile">
    <div class="form-wrapper">
      <a-card
        title="基本信息"
        :bordered="false"
        class="card-content"
      >
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
        >
          <a-form-model-item
            label="智源ID"
            class="my-profile-view"
          >
            103753
          </a-form-model-item>

          <a-form-model-item
            label="姓名"
            prop="name"
          >
            <a-input
              v-model="form.name"
              size="large"
              placeholder="请输入..."
            />
          </a-form-model-item>

          <a-form-model-item
            label="邮箱"
            class="my-profile-view"
            style="margin-top: -16px;"
          >
            12341234@qq.com
          </a-form-model-item>

          <a-form-model-item
            label="个人网站"
            prop="website"
          >
            <a-input
              v-model="form.website"
              size="large"
              placeholder="请输入..."
            />
          </a-form-model-item>

          <a-form-model-item
            label="公司/学校"
            prop="company"
          >
            <a-input
              v-model="form.company"
              size="large"
              placeholder="请输入..."
            />
          </a-form-model-item>

          <a-form-model-item
            label="部门/学院"
            prop="department"
          >
            <a-input
              v-model="form.department"
              size="large"
              placeholder="请输入..."
            />
          </a-form-model-item>

          <a-form-model-item
            label="职位/专业"
            prop="position"
          >
            <a-input
              v-model="form.position"
              size="large"
              placeholder="请输入..."
            />
          </a-form-model-item>

          <a-form-model-item
            label="个人简介"
            prop="profile"
          >
            <v-comment-textarea>
              <a-textarea
                v-model="form.profile"
                placeholder="请输入..."
              />
            </v-comment-textarea>
          </a-form-model-item>

          <a-form-model-item label="">
            <a-button
              size="large"
              type="primary"
              class="my-profile-submit"
              @click="onEditMyProfile"
            >
              提交
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>
  </div>
</template>

<script>
import CommentTextarea from '~/components/comment-textarea'

export default {
  components: {
    'v-comment-textarea': CommentTextarea,
  },

  data () {
    return {
      form: {
        name: '',
        company: '',
        website: '',
        profile: '',
        position: '',
        department: '',
      },

      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        company: [
          { required: true, message: '请输入公司/学校', trigger: 'blur' },
        ],
        website: [
          { required: true, message: '请输入个人网站', trigger: 'blur' },
        ],
        profile: [
          { required: true, message: '请输入个人简介', trigger: 'blur' },
        ],
        position: [
          { required: true, message: '请输入职位/专业', trigger: 'blur' },
        ],
        department: [
          { required: true, message: '请输入部门/学院', trigger: 'blur' },
        ],
      },
    }
  },

  methods: {
    onEditMyProfile () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
